<template>
	<view class="appointment-content">
		<view class="banner">
			<view class="background_img">
				<image class="img" :src="topimg" mode=""></image>
			</view>
			<view class="nav">
				<image src="@/static/img/courseBuy/back.png" alt="" class="back" @tap="backHandle">
				<text>{{info.siteinfo.name}}</text>
			</view>
			<view class="appointment-information">
				<view class="title-row">
					<text>预约信息</text>
				</view>
				<view class="user-appointment-information">
					<view class="username-row">
						<text>预约用户</text>
						<view class="identity">
							<view>
							    {{info.siteinfo.status=='0'?'学生': ''}}
							    {{info.siteinfo.status=='1'?'老师': ''}}
							    {{info.siteinfo.status=='2'?'社畜': ''}}
							</view>
							<text>{{info.siteinfo.userName}}</text>
						</view>
					</view>
					<view class="phone-row">
						<text>联系电话</text>
						<text>{{info.siteinfo.telephone}}</text>
					</view>
					<view class="unit-row">
						<text>所在单位</text>
						<text>{{info.siteinfo.siteAddress}}</text>
					</view>
					<view class="base-row">
						<text>预约基地</text>
						<text>{{info.siteinfo.name}}</text>
					</view>
					<view class="time-row">
						<text>预约时段</text>
						<view class="time">
							<!-- v-for="(item,index) in info.siteTimes" -->
							<view v-for="item in secondTimer ">
								<text>{{info.siteinfo.newTime}}</text>
								<text>{{item.timeSlot}}</text>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="pay-row">
				<view class="price-all">
					<text>支付金额:</text>
					<text>￥</text>
					<text>{{0}}</text>
				</view>
				<view class="pay-btn-row" >
					<u-button type="default" shape="circle" hover-class="none" class="pay-btn" @tap="one"
						  >立即预约
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {API} from '@/config/myApi.js';
	export default{
		data(){
			return{
				info: {},
				secondTimer:[],
					array : [],
					alltit:{},
					topimg:null,
					newdata:{}
			}
		},
		onLoad(option) {
			console.log("基地信息",JSON.parse(option.data));
			this.info=JSON.parse(option.data)
				console.log("基地信息1",this.info);
				this.secondTimer=JSON.parse(option.data).timeArr
				console.log("基地信息2",this.secondTimer);
				this.topimg=this.info.siteinfo.trainingBaseCover
				this.newdata={
					// name:this.info.siteinfo.userName,
					status:this.info.siteinfo.status,
					userName:this.info.siteinfo.userName,
					telephone:this.info.siteinfo.telephone,
					siteAddress:this.info.siteinfo.siteAddress,
					nameb:this.info.siteinfo.name,
					siteinfo:this.info.siteinfo.newTime,
					time:this.secondTimer
				}
			uni.setStorage({
				key: 'storage_key',
				data: 'hello',
				success: function () {
					console.log('success');
				}
			});
			// this.getUsre();
			// this.appointmentHandle()
		},
	
		methods:{
			backHandle(){
				uni.navigateBack()
			},
			// 跳转
			one(){
				console.log(this.newdata);
				this.getUsre()
				uni.navigateTo({
					url:'/pages/base/pay?data='+JSON.stringify(this.newdata)
				})
			},
			// 真实接口
			appointmentHandle(){

				console.log("第二个数组",this.secondTimer);
				for (let i = 0; i < this.secondTimer.length; i++) {
					let obj = {}
					obj.id = this.secondTimer[i].id
					obj.orderDate= this.info.siteinfo.newTime
					this.array.push(obj)
				}
					
			console.log("array",this.array);
		
			},
			getUsre(){
				this.appointmentHandle()
				let np = {
					trainingBaseId:this.info.siteinfo.id,
					trainingBaseTimeVO:this.array
				}
				console.log("data",np);
				API.getnpm(np).then(res=>{
					if(res.code==200){
						console.log("数据成功",res);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.appointment-content {
		.banner {
			height: 516rpx;
			width: 100vw;
			background: #d6d6d6;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			background-size: cover;
			.background_img{
				width: 100%;
				height: 100%;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.nav {
				width: 100vw;
				height: 88rpx;
				position: relative;
				text-align: center;
				line-height: 88rpx;

				.back {
					width: 18rpx;
					height: 32rpx;
					position: absolute;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					margin-top: 0px !important;
				}

				>text {
					font-size: 36rpx;
					color: #fff;
				}
			}
			.appointment-information{
				width: 690rpx;
				background: #fff;
				position: absolute;
				left: 50%;
				top: 326rpx;
				transform: translateX(-50%);
				padding: 54rpx 24rpx 40rpx;
				border-radius: 14rpx;
				.title-row{
					width: 232rpx;
					border-bottom: 10rpx solid #F4333C;
					margin: 0rpx auto;
					position: relative;
					>text{
						font-size: 36rpx;
						color: #333333;
						font-weight: bold;
						display: block;
						width: 232rpx;
						text-align: center;
						position: absolute;
						left: 0rpx;
						bottom: -16rpx;
					}
				}
				.user-appointment-information{
					margin-top: 75rpx;
					.username-row{
						display: flex;
						justify-content: space-between;
						align-items: center;
						>text{
							font-size: 30rpx;
							color: #999999;
						}
						.identity{
							display: flex;
							align-items: center;
							>view{
								width: 92rpx;
								height: 40rpx;
								background: #61ABFF;
								border-radius: 5rpx;
								font-size: 24rpx;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							>text{
								font-size: 30rpx;
								color: #333333;
								margin-left: 10rpx;
							}
						}
					}
					.phone-row,.unit-row,.base-row{
						display: flex;
						justify-content: space-between;
						margin-top: 60rpx;
						>text:first-of-type{
							font-size: 30rpx;
							color: #999999;
						}
						>text:last-of-type{
							font-size: 30rpx;
							color: #333333;
						}
					}
					.time-row{
						display: flex;
						justify-content: space-between;
						margin-top: 60rpx;
						>text{
							font-size: 30rpx;
							color: #999999;
						}
						.time{
							>view{
								>text{
									font-size: 30rpx;
									color: #333333;
								}
								>text:last-of-type{
									margin-left: 20rpx;
								}
							}
							>view:last-of-type{
								margin-top: 20rpx;
							}
						}
					}
				}
			}
		}
		.footer{
			.pay-row {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100vw;
				height: 120rpx;
				box-shadow: 5rpx 0 20rpx #B4B4B4;
				padding: 0rpx 41rpx 0rpx 55rpx;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price-all {
					>text:nth-of-type(1){
						font-size: 24rpx;
						color: #666666;
					}
					>text:nth-of-type(2) {
						font-size: 24rpx;
						color: #F4333C;
					}
			
					>text:nth-of-type(3) {
						font-size: 34rpx;
						font-weight: bold;
						color: #F4333C;
					}
				}
			
				.pay-btn-row {
					.pay-btn {
						background-color: #F4333C;
						color: #fff;
						width: 260rpx;
						height: 80rpx;
					}
			
					.u-hairline-border:after {
						border: none;
					}
				}
			}
		}
	}
</style>
